
<template>
  <div style="height: 100vh;overflow: hidden;display:flex;align-items: center;justify-content: center;" class="background-container">
    <div style="display: flex;width: 50%; margin: 0 auto;background-color: antiquewhite;justify-content: center;border-radius: 10px;overflow: hidden">
      <div style="flex: 1">
        <img src="@/assets/Charlemagne_ascends_the_throne.png" alt=""style="width: 100%;height: 100%;">
      </div>
      <div style="flex: 1;align-items: center;justify-content: center; ">
        <el-form :model="user" style ="width: 70% ; margin: 0 auto" :rules = "rules" ref="formRef" >
          <div style="font-size: 20px;text-align: center;margin-bottom: 20px;">注册新账号 </div>
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user" placeholder = "请输入用户名" v-model = user.username>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" placeholder = "请输入密码" v-model = user.password>
            </el-input>
          </el-form-item>
          <el-form-item prop = "role">
            <el-radio-group v-model ="user.role">
              <el-radio label = "用户"></el-radio>
              <el-radio label = "商家"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item >
            <el-button type = "primary" style = "width: 50%;" @click="regisit">
              注册
            </el-button>

          </el-form-item>
            <div >
              注册过了？请<span style=" color: #42b983; cursor: pointer;"@click = "tologin">登录</span>
            </div>
        </el-form>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  name: "Regisit.vue",
  components:{

  },
  data(){
    return{
      user: {
        username:'',
        password:'',
        role:''
      },
      rules:{
        username: [{required:true,message:"请输入用户名",trigger:"blur"}],
        password: [{required:true,message:"请输入密码",trigger:"blur"}],
        role: [{required:true,message:"请选择身份",trigger:"blur"}]
        }
    }
  },
  created(){}
  ,
  methods:{

    regisit() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.$request.post('/register', this.user).then((res) => {
            if (res.code === '200') {
              this.$router.push('/login');
              this.$message.success('注册成功');
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          console.log('验证失败');
          return false;
        }
      });},
    tologin(){
      this.$router.push('/login')
    }
  }


}
</script>


<style scoped>

</style>